﻿// JScript 文件
var popupCity  = window.createPopup();
var titleColor = "#E7E3E7"; //第一行背景颜色
var indexColor = "#D6D3D6"; //第二行背景颜色
var cityColor  = "#FFFFFF";
var borderColor = "#6595D6";  //边框颜色

var inputControl;
var titleStyle = 'style="font-weight: bold;color: #FFFFFF;background-image: url(/B2C/common/images/newimg/bg1.gif);height: 25px;font-size: 9pt;"';
var indexStyle = 'style="BACKGROUND-IMAGE: url(../images/newimg/bg2.gif); BACKGROUND-COLOR: #F3F6FA; color: #333333;background-repeat:repeat-x; background-position:bottom; font-size: 9pt;"';
var style3 = 'style="width: 100%;overflow:hidden; text-overflow:ellipsis;"';

var columnsInTable = 6; //表格中列的数量
var rowsInTable = 6; //表格中行的数量

var arrCityName  = new Array();
var arrCityCode  = new Array();
var arrCityIndex = new Array();
var arrIndex     = new Array("A","B","C","D","E","F","G","H","J","K","L","M","N","O","P","Q","S","T","W","X","Y","Z");
var arrCity      = new Array(arrCityIndex, arrCityCode, arrCityName);

var rowsHeight = 25;  //数据显示高度
var tableWidth = 350;
var tableHeight = 500;

var popup_i; 
var popup_int0=0;
var popup_int1=0;
var popup_int2=0;
var popup_int3=0;

var valueControl;

function Split(popup_str,popup_n,popup_s){ //字符串,取第几个数据,分割字符
	var popup_split=popup_str.split(popup_s);
	return popup_split[popup_n];
}

function popUp(controlName,refControl)
{
    if(typeof(controlName) == 'string')
	    inputControl = document.all(controlName);
    else
	    inputControl = controlName;
	    
	if(typeof(refControl) == 'string')
	    valueControl = document.all(refControl);
    else
	    valueControl = refControl;

    var posLib = 
    {
        getClientLeft:function(el) 
        {
            var r = el.getBoundingClientRect();
            return r.left - this.getBorderLeftWidth(this.getCanvasElement(el));
        },
        getClientTop:function (el)
        {
            var r = el.getBoundingClientRect();
            return r.top - this.getBorderTopWidth(this.getCanvasElement(el));
        },
        getLeft:function (el) 
        {
            return this.getClientLeft(el) + this.getCanvasElement(el).scrollLeft;
        },
        getTop:function (el) {
            return this.getClientTop(el) + this.getCanvasElement(el).scrollTop;
        },
        getInnerLeft:function (el) 
        {
            return this.getLeft(el) + this.getBorderLeftWidth(el);
        },
        getInnerTop:function (el) 
        {
            return this.getTop(el) + this.getBorderTopWidth(el);
        },
        getWidth:function (el) 
        {
            return el.offsetWidth;
        },
        getHeight:function (el) 
        {
            return el.offsetHeight;
        },
        getCanvasElement:function (el) 
        {
            var doc = el.ownerDocument || el.document;    // IE55 bug
            if (doc.compatMode == "CSS1Compat")
                return doc.documentElement;
            else
                return doc.body;
        },
        getBorderLeftWidth:function (el) 
        {
            return el.clientLeft;
        },
        getBorderTopWidth:function (el) 
        {
            return el.clientTop;
        },
        getScreenLeft:function (el) 
        {
            var doc = el.ownerDocument || el.document;    // IE55 bug
            var w = doc.parentWindow;
            return w.screenLeft + this.getBorderLeftWidth(this.getCanvasElement(el)) + this.getClientLeft(el);
        },
        getScreenTop:function (el) 
        {
            var doc = el.ownerDocument || el.document;    // IE55 bug
            var w = doc.parentWindow;
            return w.screenTop  + this.getClientTop(el);//+ this.getBorderTopWidth(this.getCanvasElement(el))
        }
    }
    popup_int0=0;
    popup_int1=0;
    popup_int2=0;
    popup_int3=0;
    
    var tab;
    tab  = '<table width=100%"' + tableWidth + '" border="0" cellpadding="0" cellspacing="2" bgcolor="' + borderColor + '">';
    tab += '    <tr>';
    tab += '        <td>';
    tab += '            <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:' + titleColor + ';">';
    tab += '                <tr align="center">';
    tab += '                    <td height="23"' + titleStyle + '>请选择您要的城市</td>';
    tab += '                </tr>';
    tab += '                <tr align="center">';
    tab += '                    <td height="23"' + indexStyle + '>';
    tab += '                        <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0" style="font-size: 9pt">';
    tab += '                            <tr>';
    tab += '                                <td width="100">城市拼音首字母：</td>';
    tab += '                                <td>';
    tab += '                                    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 10pt">';
    tab += '                                        <tr align="center">';
    for(var i = 0; i<26; i++)
    {
	    if(!arrIndex[i]) break;
	    tab += '                                        <td id="H_' + arrIndex[i] + '">';
	    tab += '                                            <label id="' + arrIndex[i] + '" style="color:#0000FF; cursor:hand" title="点击查看城市首字母为 ' + arrIndex[i] + ' 的城市">' + arrIndex[i]+'</label>';
	    tab += '                                        </td>';
    }
//  tab += '                                            <td id="H_SH"><label id="SH" style="color:#FF0000; cursor:hand" title="点击查看省会城市">SH</label></td>';
    tab += '                                        </tr>';
    tab += '                                    </table>';
    tab += '                                </td>';
    tab += '                            </tr>';
    tab += '                        </table>';
    tab += '                    </td>';
    tab += '                </tr>';
    tab += '                <tr align="center">';
    tab += '                    <td id="Popup_Tab">';
    tab += '                        <div style="overflow:auto;width:345px;height:150px">';
    tab += '                        <table width="100%" border="0" cellspacing="1" cellpadding="0" style="font-size: 9pt">';
    
    var arrCityData = GetIndexData(arrIndex[0]);
    var indexNo = 0;
    var maxRows;
    if(arrCityData[0].length / columnsInTable <= 6) {
        maxRows = 6;
    }
    else {
        maxRows = Math.round(arrCityData[0].length / columnsInTable) + 1;
    }
    for(i = 0; i < columnsInTable * maxRows; i++)
    {
	    if(i==0 || i % columnsInTable ==0)
	    {
		    tab += '                    <tr align="center" style="background-color:' + cityColor + ';">';
	    }
	    if(arrCityData[0][i])
	    {
		    tab += '                        <td height="' + rowsHeight + '" width="14.3%" ID="POP_TD_CITY_'+indexNo+'" title="' + 
		           arrCityData[2][i] + '" style="font-size: 9pt"><NOBR ' + style3 + ' ID="POP_NOBR_CITY_' + arrCityData[1][i] + 
		           '_' + indexNo + '">' + arrCityData[2][i] + '</NOBR></td>';
		    indexNo++;
	    }
	    else
	    {
		    tab += '                        <td height="' + rowsHeight + '" width="14.3%">&nbsp;</td>';
	    }
	    if((i + 1) % columnsInTable == 0)
	    {
		    tab += '                    </tr>';
	    }
    }

    tab += '                        </table>';
    tab += '                        </div>';
    tab += '                    </td>';
    tab += '                </tr>';
    tab += '            </table>';
    tab += '        </td>';
    tab += '    </tr>';
    tab += '</table>';
    
    var newX = posLib.getClientLeft(inputControl) + posLib.getCanvasElement(inputControl).clientLeft;
    var newY = posLib.getClientTop(inputControl) + inputControl.offsetHeight + posLib.getCanvasElement(inputControl).clientTop;
    popupCity.document.body.innerHTML = tab;
    popupCity.document.body.onclick = Htc_OnClick;
    popupCity.document.body.onmousemove = Htc_onmousemove;
    popupCity.show(newX,newY,350,209,document.body);
}

function Htc_OnClick()
{  //鼠标点击事件
    var Htc_str;
    var obj = this.document.parentWindow;
    var e = obj.event.srcElement;
    if (e.tagName == "LABEL")  
    {
	    if(e.id != "")
	    {
		    ShowData(e.id);
	    }
    }
    if (e.tagName == "NOBR")  
    {
	  //f_z(Split(e.id,3,"_"));
	  //f_z(popupCity.document.all(e.id).innerHTML);
	    SetInputValue(popupCity.document.all(e.id).innerHTML,"Name");
	    SetInputValue(popupCity.document.all(e.id).id.split("_")[3],"Code");
	    popupCity.hide();
    }
    if (e.tagName == "TD")
    {//H_
	    if(e.id!="")
	    {
	        SetInputValue(popupCity.document.all(e.id).title,"Name");
	        SetInputValue(popupCity.document.all(e.id).id.split("_")[3],"Code");
	    }
    }
}

var previousObj;
function Htc_onmousemove()
{//鼠标移动事件
    var obj = this.document.parentWindow;
    var e = obj.event.srcElement;
    if (e.tagName == "TD")
    {
        if(e.id != "") 
        {
            TurnRowsColor(e.id,previousObj);
        }
    }
    if (e.tagName == "NOBR")
    {
        if(e.id!="") 
        {
            TurnRowsColor("POP_TD_CITY_"+ (e.id.split("_"))[4],previousObj);
        }
    }
}
function TurnRowsColor(curObj,preObj) //鼠标移动TD背景颜色
{
    var bgColor = "#FFD373";
    if(popupCity.document.all(preObj)) popupCity.document.all(preObj).style.backgroundColor="";
    if(popupCity.document.all(curObj)) popupCity.document.all(curObj).style.backgroundColor=bgColor;
    if(popupCity.document.all(curObj)) popupCity.document.all(curObj).style.cursor="hand";
    previousObj = curObj;	
}

//var yc_dt_cs="SH";
function ShowData(indexID)
{
    //popupCity.document.all(yc_dt_cs).style.color="#0000FF";
	popupCity.document.all(indexID).style.color="#FF0000";
	ShowDataTable(indexID);
}

function ShowDataTable(indexID)
{ //生成数据
	var indexDataTable = "";
	var arrCityData = GetIndexData(indexID);
	var indexNo = 0;
	var maxRows;
	if(arrCityData[0].length / columnsInTable <= 6) {
	    maxRows = 6;
	}
	else {
	    maxRows = Math.round(arrCityData[0].length / columnsInTable) + 1;
	}
	indexDataTable += '<div style="overflow:auto;width:345px;height:150px"><table width="100%" border="0" cellspacing="1" cellpadding="0" style="font-size: 9pt">';
	for(i = 0; i < (columnsInTable * maxRows); i++)
	{
		if(i == 0 || i % columnsInTable == 0)
		{
			indexDataTable += 
			         '  <tr align="center" style="background-color:' + cityColor + ';">';
		}
		if(arrCityData[0][i])
		{
			indexDataTable += 
			         '      <td height="' + rowsHeight + '" width="14.3%" ID="POP_TD_CITY_' + arrCityData[1][i] + '_' + indexNo + 
			         '" title="' + arrCityData[2][i] + '" style="font-size: 9pt"><NOBR ' + style3 + 
			         ' ID="POP_NOBR_CITY_' + arrCityData[1][i] + '_' + indexNo + '">' + arrCityData[2][i] + '</NOBR></td>';
			indexNo++;
		}
		else
		{
			indexDataTable += 
			         '      <td height="' + rowsHeight + '" width="14.3%">&nbsp;</td>';
		}
		if((i + 1) % columnsInTable == 0)
		{
			indexDataTable += 
			         '  </tr>';
		}
	}
	indexDataTable += '</table></div>';
	popupCity.document.all("Popup_Tab").innerHTML = indexDataTable;
}

function f_z(temp)
{   //赋值给控件
    inputControl.value=temp;
    setCodevalue(temp);
}
function setCodevalue(temp)
{
	var length = qtcs.length;
	for(i = 0; i < length; i++)
	{
	    var tempArray = qtcs[i].split("|");
		if(tempArray[0] == temp)
		{
			inputControl.codevalue = tempArray[1];
			break;
		}
	}
}
function SetInputValue(obj,type)
{
    if(type == "Name") {
        inputControl.value = obj;
    }
    if(type == "Code") {
        valueControl.value = obj;
    }
}
function GetIndexData(indexNo)
{
    var arrCityData = new Array(new Array(), new Array(), new Array());
	var dataNo = 0;
	for(i = 0; i < arrCityIndex.length ; i++)
	{
		if(arrCity[0][i] == indexNo)
		{
			arrCityData[0][dataNo] = arrCity[0][i];
			arrCityData[1][dataNo] = arrCity[1][i];
			arrCityData[2][dataNo] = arrCity[2][i];
			dataNo++;
		}
	}
	return arrCityData;
}
